
<template>
  <main>
    <h1>This is Home page</h1>
    <input type="text" v-model="inputText">
    <input type="text" v-model="num">
    <button @click="handleClick">更新obj</button>
  </main>
</template>

<script setup>
import {ref,watch} from 'vue'

var inputText = ref('')
var num = ref(0)
var obj = ref({ name:'李煜',age:20 })

var handleClick = ()=>{
  obj.value.name = '李清照';
  // obj.value.age = 30;
}

// watch 监听单个数据
// watch(inputText,()=>{
//   console.log('inputText更新了',inputText);
// })

// watch 监听多个数据
// watch( [inputText,num] ,()=>{
//   console.log('更新了',inputText,num);
// })

// Vue3 可以监听整个对象, 当对象内的任何一个属性发生改变时, 都会执行监听的回调函数.
// watch( 
//   obj , 
//   ()=>{
//     console.log('obj更新了',obj.value);
//   },
//   {
//     deep:true,//开启深度监听
//     immedidate:true,//立即执行回调函数
//   }  
// )

// Vue3 监听对象的某个属性 
// watch( ()=>obj.value.age, ()=>{
//   console.log('obj.age更新了',obj.value.age);
// } )

</script>